<div class="two-range-slider-component"
     [class.show-value]="showSliderValue"
     [class.is-loading]="isLoading"
     [class.is-dragging]="dragInProgress">
  <div *ngIf="!hideSliderValue && min !== null"
       class="min-value">
    {{getDisplayValue(min)}}
  </div>

  <div #progressBar class="progress-bar">
    <div #progressLine class="progress-line"></div>

    <div #handleOne
         class="visible-dragger handle-one"
         [class.display-value]="!hideSliderValue"
         [style.width]="draggerSize+'px'"
         [style.height]="draggerSize+'px'"
         [style.top]="draggerCenterOffset+'px'">
      <span class="slider-value">
        {{getMinSliderDisplayValue()}}
      </span>
      <div class="loading-spinner"></div>
    </div>

    <div #handleTwo
         class="visible-dragger handle-two"
         [class.display-value]="!hideSliderValue"
         [style.width]="draggerSize+'px'"
         [style.height]="draggerSize+'px'"
         [style.top]="draggerCenterOffset+'px'">
      <span class="slider-value">
        {{getMaxSliderDisplayValue()}}
      </span>
      <div class="loading-spinner"></div>
    </div>

    <input #sliderOne
           type="range"
           [min]="min"
           [max]="max"
           [step]="step"
           [(ngModel)]="tmpMinValue"
           (ngModelChange)="updateMinValue()">
    <input #sliderTwo
           type="range"
           [min]="min"
           [max]="max"
           [step]="step"
           [(ngModel)]="tmpMaxValue"
           (ngModelChange)="updateMaxValue()">
  </div>

  <div *ngIf="!hideSliderValue && max !== null"
       class="max-value">
    {{getDisplayValue(max)}}
  </div>
</div>
